<template>
	<view>
		<div class="head">
			<image class="head-labimg" src="/static/study/lab.png"/>
		    <div class="head-input" @click="dropDown()">
		        <input class="head-text" :value="curName" disabled="false"/>
				<image class="head-img" src="/static/study/arrow1.png">
			   <div class="dropDowm dropDowm-div" v-if="isShow">
				   <div class="dropDowm-item" v-for="(item,index) in dropList" :key="index">
					   <div class="dropDowm-items" @click="selectKey(index)" :class="[selectIndex == index ?'dropDowm-sele':'' ]">{{item.name}}</div>
				   </div>
				</div>
		    </div>
			<image class="head-labimg" src="/static/study/lab.png"/>
		</div>
	</view>
</template>

<script>
	import {isEmpty} from '@/utils/index';
	export default {
		props:{
			dropList:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		data(){
			return{
				isShow:false,
				selectIndex:0,
				selectNameIndex:0,
			}
		},
		computed:{
			curName(){
				if(isEmpty(this.dropList)||this.dropList.length<=this.selectIndex){
					return '';
				}
				return this.dropList[this.selectIndex].name;
			}
		},
		methods:{
			dropDown(){
			    this.isShow = !this.isShow;
			},
			selectKey(index){
				if(this.selectIndex===index){
					return;
				}
			    this.selectIndex = index;
				//选择未改变，不触发事件
				this.$emit('change',index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		align-items: center;
	    display:flex;
	    height:60upx;
		margin: auto;
	    &-input{
	        height:60upx;
	        border:1upx solid #4a96f2;
	        border-radius:10upx;
	        font-size:28upx;
			display: flex;
			flex: 1;
			position: relative;
	    }
	    &-text{
	        padding-left:10upx;
			height:60upx;
			flex: 1;
	    }
	    &-img{
	        width:28upx;
	        height:20upx;
			margin: auto;
			margin-right: 40upx;
	    }
	    &-lab{
	        margin: 0 10upx;
	    }
	    &-labimg{
	        width:30upx;
	        height:4upx;
			margin: auto 20upx;
	    }
	}
	.dropDowm{
	    position:absolute;
		top: 64upx;
	    z-index:9;
	    width:100%;
		padding-left: 20upx;
		background-color: white;
		box-shadow: 0 8upx 20upx 0 
				rgba(153, 153, 153, 0.15);
		border-radius: 8upx;
		border: solid 2upx #f7f7f7;
	    &-div{
	        border-radius:10upx;
	        max-height:200upx;
	        overflow-y: auto;
	    }
	    &-item{
	        font-size:28upx;
	        color:#333;
	        margin:10upx 0;
	    }
	    &-items{
	        height:50upx;
	        line-height:50upx;
	    }
	    &-sele{
	        background:#4a96f2;
	        color:#fff;
	    }
	}
</style>
